<template>
	<satri-page :padding="20">
		<satri-card label="基础用法">
			<satri-badge :value="16">
				<satri-button>消息</satri-button>
			</satri-badge>
		</satri-card>

		<satri-card label="自定义内容">
			<satri-badge value="NEW">
				<satri-button>自定义内容</satri-button>
			</satri-badge>
		</satri-card>

		<satri-card label="自定义内容">
			<satri-badge :value="132" :max="99">
				<satri-button>最大</satri-button>
			</satri-badge>
		</satri-card>

		<satri-card label="点形状">
			<satri-badge :value="132" is-dot>
				<satri-button>点形状</satri-button>
			</satri-badge>
		</satri-card>

		<satri-card label="不同样式">
			<satri-badge :value="132" plain>
				<satri-button>不同样式</satri-button>
			</satri-badge>
		</satri-card>

		<satri-card label="不同状态">
			<satri-row>
				<satri-col :span="6">
					<satri-badge type="primary" is-dot>
						<satri-button>主要</satri-button>
					</satri-badge>
				</satri-col>

				<satri-col :span="6">
					<satri-badge type="success" value="Hot">
						<satri-button>成功</satri-button>
					</satri-badge>
				</satri-col>

				<satri-col :span="6">
					<satri-badge type="error" is-dot>
						<satri-button>失败</satri-button>
					</satri-badge>
				</satri-col>

				<satri-col :span="6">
					<satri-badge type="warning" :value="20">
						<satri-button>警告</satri-button>
					</satri-badge>
				</satri-col>
			</satri-row>
		</satri-card>
	</satri-page>
</template>
